<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的网络请求axios</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        // console.log('值类型是 ' + typeOf Promise);
        // promise的基本使用

        var pro = new Promise(function(resolve, reject) {

            // 使用网络请求替换耗时操作
            setTimeout(() => {
                var flag = true;
                if (flag) {
                    resolve('正确的结果')
                } else {
                    reject('错误的结果')
                }

            }, 1000);
        })

        pro.then(function(data) {
            console.log('结果是:' + data);
        }, function(data) {
            console.log('结果是:' + data);
        })


        // 1. ================= 使用promise对象实现多级顺序调用的过程

        function query(url) {

            var pro = new pormise(function(resolve, reject) {
                setTimeout(() => {
                    // 这里只处理调用成功的情况
                    resolve('调用成功')
                }, 1000);
            })
            return pro;
        }

        query('http://www.query/1')
            .then(function(data) {
                // 成功了
                return query("http://www.query/2")
            })
            .then(function(data) {
                // 成功了
                return query("http://www.query/3")
            })
            .then(function(data) {
                // 成功了
            })

        // 2. =========== promise的另外两个常用的方法 catch和finally方法

        query("http://www.data")
            .then(function(data) {
                console.log(data);
            })
            // 作用相同于then的第二个函数
            .catch(function(error) {
                console.log(error);
            })
            .finally(function() {
                console.log('finally 调用了 ');
            })

        // 3. ============= promise类方法 
        // Promise.all() 发起多个请求 返回也是多个结果
        // Promise.race()  发起多个请求 返回的是最后回来的那个结果
        var p1 = query("http://www.data1");
        var p2 = query("http://www.data2");
        var p3 = query("http://www.data3");

        Promise.all([p1, p2, p3]).then(function(data) {
            // 返回也是一个数组结果
            console.log(data);
        })

        Promise.race([p1, p2, p3]).then(function(data) {
            // 返回的是最先出结果的那个回调请求 其他结果不在意
            console.log(data);
        })

        console.dir(Promise)
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {},
        })
    </script>
</body>

</html>


<!-- 前端工程中的异步调用  函数会异步执行
1.如果需要顺序执行 则需要在回调中再次添加执行动作 这样就造成了回调嵌套 (回调地狱) 
2.promise对象的使用其实就是对回调方式进行了封装 ajax 网络请求方式 
3. 如果在then接口中返回了promise对象 则下一then的调用者是上个接口返回的promise对象 如果返回的是普通值 则会返回一个默认promise对象 再调用时会直接返回上一个then中返回的普通值-->